最近开发使用el-tree树形控件时,遇到不少问题，而且问题都是比较常用到的，这里记录一下，仅供参考。

树形页面如下：

代码如下：

ref="tree" :load="loadNode" :props="props" node-key="id" :show-checkbox="false" lazy :highlight-current="true" @node-click="handleNodeClick">

el-tree默认显示的字段key为label、children、isLeaf，但我们在实际开发中我们拿到的数据可能并不是这些字段，这就需要我们去配置，如下：

props: { label: 'name', children: 'children', isLeaf: 'leaf' }

在开发中，我需要用到懒加载数据，即点击当前节点才会去加载当前节点的数据，这里用的是vue，代码如下：

async loadNode (node, resolve) { // 这里第一层和其他层不是同一个接口，需要特殊处理。 if (node.level === 0) { // 操作第一层数据时，刷新节点时使用 this.treeCurrentNode = node // 第一层 const items = await this.$store.dispatch('organization/getCategory') resolve(data) } else { const data = await this.$store.dispatch('organization/getOrgTreeChild', { id: node.data.id }) data.forEach(ite => { ite.leaf = ite.children.length === 0 }) resolve(data) } }

注意：1、loadNode方法接受两个参数node 和 resolve2、node - 对象 - 当前树结点信息3、 resolve - 函数 - 传递当前node对象子结点的数据4、这里通常我们异步方法来加载数据 不用担心resolve调用之前会自动帮我们呈现loading方法

在el-tree进行某种操作之后，比如新增、删除、编辑等，怎么去刷新操作的节点去更新数据？这个官方并没有给出具体的方法，这里找到了一种，仅供参考。

以新增为例，currentNode为当前选中节点的数据，代码如下：

addNew (data) { if (this.type === 'addNext') { // 添加当前节点的下一级 // 根据当前节点的数据，找到当前的树节点 const treeNode = this.$refs.tree.getNode(this.currentNode) treeNode.expanded = true // 设置为展开 treeNode.loaded = false treeNode.loadData() // 刷新当前节点 this.$store.commit('organization/updateCurrentNode', data) } else { // 添加第一级的数据 this.treeCurrentNode.loaded = false this.treeCurrentNode.loadData() this.$store.commit('organization/updateCurrentNode', data) }}

还有一个常用的刷新节点的方法：刷新父节点数据 （删除节点时一般会用到）

deleteItem (data) { const treeNode = this.$refs.tree.getNode(data) treeNode.parent.loaded = false treeNode.parent.loadData() // 刷新父节点数据}

在新增、删除操作成功之后，我们常常需要重新设置当前选中的节点，el官方给我们提供了方法setCurrentKey，但初次使用这个方法的小白，往往会遇到不起作用的问题。这是因为这个方法要和$nextTick搭配使用，否则数据未挂载，我们的设置并不能生效：

this.$nextTick(() => { this.$refs.tree.setCurrentKey(data.id) })